if (!window.requestAnimationFrame) {
    var lastTime = 0;
    window.requestAnimationFrame = function (callback) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
        var id = window.setTimeout(function () {
            callback(currTime + timeToCall);
        }, timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    }
}
if (!window.cancelAnimationFrame) {
    window.cancelAnimationFrame = function (id) {
        clearTimeout(id);
    };
}

var c1 = document.querySelector("#c1");
c1.width = document.documentElement.offsetWidth || window.screen.width;
c1.height = document.documentElement.offsetHeight || window.screen.height;
var ctx1 = c1.getContext('2d');


var c2 = document.querySelector("#c2");
c2.width = document.documentElement.offsetWidth || window.screen.width;
c2.height = document.documentElement.offsetHeight || window.screen.height;
var ctx2 = c2.getContext('2d');






var an = null;

//缓动函数

function Linear(t, b, c, d) {
    return c * t / d + b;
}


//文字

var imgData = null;
var posData = [];
var text = ["企业网站建设", "小程序建设", "测试建设"];
var starArr = [];
var nnn = 0;

window.onresize = function () {
    starArr = [];
    c1.width = document.documentElement.offsetWidth || window.screen.width;
    c1.height = document.documentElement.offsetHeight || window.screen.height;
    c2.width = document.documentElement.offsetWidth || window.screen.width;
    c2.height = document.documentElement.offsetHeight || window.screen.height;
    drawStar();
}

function init(t) {
    imgData = null;
    posData = [];
    if (t) {
        draw(t);
    } else {
        draw();
    }
}

init();
drawStar();

ready();



//  document.querySelector(".ready").onclick = function () {
//      this.style.display = 'none';
//      ready();
//  }


function ready() {
    setInterval(function () {
        starArr.forEach(function (v) {
            v.tween.t = 0;
        });
        cancelAnimationFrame(an);
        nnn++;
        init(text[nnn]);
        if (nnn >= text.length) {
            nnn = 0;
        }
    }, 2500)
}

function draw(t) {
    c2.width = c2.width;
    ctx2.fillStyle = "#fff";
    ctx2.fillRect(0, 0, c1.width, c1.height);

    ctx2.fillStyle = "#000";
    ctx2.font = "80px 微软雅黑";
    ctx2.textAlign = "center";
    ctx2.beginPath();
    ctx2.fillText(t || text[0], c1.width / 2, c1.height / 3 - 50);
    imgData = ctx2.getImageData(0, 0, c1.width, c1.height);
    pushArr();
}

var cols = 250;
var rows = 150;
var w = parseInt(c1.width / cols);
var h = parseInt(c1.height / rows);
var pos = 0;

function pushArr() {



    for (var i = 1; i <= cols; i++) {
        for (var j = 1; j <= rows; j++) {
            pos = [(j * h - 1) * c1.width + (i * w - 1)] * 4;
            if (imgData.data[pos] < 240) {
                posData.push({
                    x: i * w,
                    y: j * h
                });
            }
        }
    }
    hide();

}

function hide() {
    c2.width = c2.width;
    an = requestAnimationFrame(show);
}

//绘制星星

function drawStar() {

    for (var i = 0; i < 1000; i++) {
        var x = parseInt(Math.random() * c1.width),
            y = parseInt(Math.random() * c1.height)
        var r = Math.random() * 1;
        var o = Math.random() * 1;
        var index = i;
        starArr.push({
            index: index,
            oldx: x,
            oldy: y,
            x: x,
            y: y,
            r: 1,
            o: o,
            state: 0,
            m: Math.random() / 100,
            tween: {
                t: 0,
                b: 0,
                c: 0,
                d: 1000,
            },
            s: function () {
                if (this.state == 0) {
                    this.o += this.m;
                } else {
                    this.o -= this.m;
                }
                if (this.o > 0.9) {
                    this.state = 1
                } else if (this.o < 0.1) {
                    this.state = 0
                }
            },
            pos: function () {
                var _this = this;
                if (_this.index < posData.length && posData[_this.index]) {
                    //  document.querySelector("#text").innerHTML = this.x + '-' + posData.length;
                    this.o = 1;
                    var xx = Linear(_this.tween.t, _this.x, posData[_this.index].x - _this.x, _this.tween.d);
                    var yy = Linear(_this.tween.t, _this.y, posData[_this.index].y - _this.y, _this.tween.d)
                    this.x = xx;
                    this.y = yy;
                } else {
                    this.x = parseInt(Linear(_this.tween.t, _this.x, _this.oldx - _this.x, _this.tween.d));
                    this.y = parseInt(Linear(_this.tween.t, _this.y, _this.oldy - _this.y, _this.tween.d));
                }
            }
        });

    }
}

//  meteor start 
var meteorArr = [];

function meteor() {
    this.x = Math.random() * document.documentElement.offsetWidth;
    this.y = Math.random() * document.documentElement.offsetHeight / 2;
    this.run = function () {
        var _this = this;
        this.x -= 10;
        this.y += 3.3;
        ctx1.beginPath();
        ctx1.strokeStyle = "rgba(255,255,255,0.3)";
        ctx1.lineCap = "round";
        ctx1.lineWidth = 1;
        ctx1.moveTo(this.x, this.y);
        ctx1.lineTo(this.x + 100, this.y - 30);
        ctx1.stroke()
        if (this.x < -(Math.random() * 5000 + 2000)) {
            this.x = Math.random() * document.documentElement.offsetWidth;
            this.y = Math.random() * document.documentElement.offsetHeight / 2;
        }
    }
}
var Meteor = new meteor();

meteorArr.push(Meteor);



function show() {
    c1.width = c1.width;
    //star&text
    Meteor.run();
    starArr.forEach(function (v) {
        v.tween.t++;
        v.pos();
        v.s();
        ctx1.fillStyle = "rgba(254,250,227," + v.o + ")";
        ctx1.fillRect(v.x, v.y, v.r, v.r);

    });
    //meteor
    an = requestAnimationFrame(show);

}
an = requestAnimationFrame(show);